<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>卡片样式</title>
    <link href="webcard.css" rel="stylesheet" />
    <link href="background.css" rel="stylesheet" />
    <style type="text/css">
        h4,h1,h2,h3 {font-size:0.2rem;}
        bady > div {font-size:0.16rem;}
    </style>
</head>
<body style="padding:0.01rem;">
    <div>
        <h4>布局样式</h4>
        <div style="width:100%;text-align:center;">
            <div class="scard bg_n" data-bg="n">
                <div class="cardcontent">
                    <div style="font-size: 0.1rem;text-align:left;padding:0.05rem;word-break:break-all;">内容页
                        内容页的大小，会撑开卡片的大小。<br />
                        内容页过小，卡片以最小长度(10rem)显示。<br />
                        标题栏高度(1.8rem)和底栏高度(1.2rem),<br />
                        内容页最小高度（0rem-由font-size:0rem决定）
                    </div>
                    <div style="height: 0.45rem; line-height: 0.45rem; font-size: 0.3rem; text-align: center; width:  0.45rem; float: left; background: #36b17b; border-radius: 0.05rem;">系</div>
                    <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left; width: 130px; text-align: center;">
                        
                    系统管理<b>(一级菜单)</b></div>
                    <div class="clearfix"></div>
                </div>
                <div class="cardtitle" style="text-indent: 50px;">标题栏<b>标题类别</b></div>
                <div class="cardbottom" style="text-indent: 50px;">底栏<b>编辑人 2018-12-12 12:23:00</b></div>
                <div class="corner rt"><b>右上角</b></div>
                <div class="corner rb"><b>右下角</b></div>
                <div class="corner lt"><b>左上角</b></div>
                <div class="corner lb"><b>左下角</b></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div style="width:100%;">
        <h2>1.文本类卡片</h2>
        <div class="scard" >
            <div class="cardtitle">我是标题<b>分类</b></div>
            <div class="cardbottom"><b>编辑人 2018-12-12 12:23:00</b></div>
            <div class="corner rt"><strong>×</strong></div>
            <div class="cardcontent">
                <div style="width:1rem;height:0.4rem;"></div>
            </div>
        </div>
        <div class="scard snone sunable">
            <div class="cardcontent">
                <div style="width:140000px;"></div>
                <div style="font-size: 16px; height: 50px; line-height: 50px;margin-left: 5px;width:1rem;"> + 新增</div>
            </div>
        </div>
        <div class="scard sunable">
            <div class="cardtitle">+ 新增</div>
            <div class="corner rt">1</div>
            <div class="cardcontent">
                <div style="width:1rem;height:0.4rem;"></div>
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="scard sbottomonly">
            <div class="cardcontent">
                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">便</div>
                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">便捷链接</div>
                <div class="clearfix"></div>
            </div>
            <div class="cardbottom"><b>编辑人 2018-12-12 12:23:00</b></div>
            <div class="corner rt"><b>2</b><strong>×</strong></div>
        </div>
        <div class="scard sbottomonly sunable">
            <div class="cardcontent">
                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #808080; border-radius: 5px;">+</div>
                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">新增</div>
                <div class="clearfix"></div>
            </div>
            <div class="cardbottom"><b>点击新增</b></div>
            <div class="corner rt"><b>3</b></div>
        </div>
        <div class="scard snone sunable">
            <div class="cardcontent">
                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #808080; border-radius: 5px; margin: 10px;">+</div>
                <div style="font-size: 16px; height: 65px; line-height: 65px; margin-left: 5px; float: left;width:0.83rem;">新增</div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="scard snone">
            <div class="cardcontent">
                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">系</div>
                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">系统管理</div>
                <div class="clearfix"></div>
            </div>
            <div class="corner rb"><b>2</b></div>
            <div class="corner rt"><strong>×</strong></div>
        </div>
        <div class="scard snone sunable">
            <div class="cardcontent">
                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #808080; border-radius: 5px;">+</div>
                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">新增</div>
                <div class="clearfix"></div>
            </div>
            <div class="corner rb"><b>3</b></div>
            <div class="corner rt"><strong>×</strong></div>
        </div>

        <div class="clearfix"></div>


       <div class="scard">
            <div class="cardtitle">我是标题<b>分类</b></div>
            <div class="cardbottom"><b>编辑人 2018-12-12 12:23:00</b></div>
            <div class="cardcontent">
                <div style="font-size:0.08rem;padding:0.05rem;word-break:break-all;">
                    我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，
                    我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，
                    我是内容。
                    <div>
                        <div class="scard snone" data-bg="n">
                            <div class="cardcontent">
                                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">系</div>
                                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">系统管理</div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="corner rb"><b>2</b></div>
                            <div class="corner rt"><strong>×</strong></div>
                        </div>
                        <div class="scard snone bg_n">
                            <div class="cardcontent">
                                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">系</div>
                                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">系统管理</div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="corner rb"><b>2</b></div>
                            <div class="corner rt"><strong>×</strong></div>
                        </div>
                        <div class="scard snone bg_n">
                            <div class="cardcontent">
                                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">系</div>
                                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">系统管理</div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="corner rb"><b>2</b></div>
                            <div class="corner rt"><strong>×</strong></div>
                        </div>
                        <div class="scard snone bg_n">
                            <div class="cardcontent">
                                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">系</div>
                                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">系统管理</div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="corner rb"><b>2</b></div>
                            <div class="corner rt"><strong>×</strong></div>
                        </div>
                        <div class="scard snone bg_n">
                            <div class="cardcontent">
                                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #36b17b; border-radius: 5px;">系</div>
                                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">系统管理</div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="corner rb"><b>2</b></div>
                            <div class="corner rt"><strong>×</strong></div>
                        </div>
                        <div class="clearfix"></div>

                    </div>
                </div>
            </div>
            <div class="corner rb"><b>2</b></div>
            <div class="corner rt"><strong>×</strong></div>
        </div>
        <div class="clearfix"></div>
    </div>

     <div>
        <h3>2.图标类卡片</h3>
        <div class="scard sbottomonly">
            <div class="cardcontent">
                <img src="../../webAdmin/img/user.png" style="width:45px;height:45px;float: left;border-radius:5px;" />
                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">便捷链接</div>
                <div class="clearfix"></div>
            </div>
            <div class="cardbottom"><b>编辑人 2018-12-12 12:23:00</b></div>
            <div class="corner rt"><b>2 </b><strong> ×</strong></div>
        </div>
        <div class="scard sbottomonly sunable">
            <div class="cardcontent">
                <div style="height: 45px; line-height: 45px; font-size: 30px; text-align: center; width: 45px; float: left; background: #808080; border-radius: 5px;">+</div>
                <div style="font-size: 16px; height: 45px; line-height: 45px; margin-left: 5px; float: left;width:1rem;">新增</div>
                <div class="clearfix"></div>
            </div>
            <div class="cardbottom"><b>点击新增</b></div>
            <div class="corner rt"><b>2 </b><strong> ×</strong></div>
        </div>
        <div class="clearfix"></div>
     </div>
    <div>
        <h3>3.图片类卡片</h3>
        <div class="scard snone">
            <div class="cardtitle">我是标题<b>分类</b></div>
            <div class="cardcontent">
                <img src="/webAdmin/img/user.png" style="width:1rem;height:1rem;"/></div>
            <div class="cardbottom"><b>编辑人 2018-12-12 12:23:00</b></div>
            <div class="corner rt"><b>12 </b><strong> ×</strong></div>
        </div>
        <div class="scard snone sunable">
            <div class="cardcontent">
                <div  style="width:1rem;height:1rem;line-height:1rem;font-size:0.8rem;text-align:center;" >+</div>
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="scard sbottom">
            <div class="cardtitle">我是标题<b>分类</b></div>
            <div class="cardcontent">
                <img src="/webAdmin/img/user.png" style="width:1rem;height:1rem;"/></div>
            <div class="cardbottom"><b>编辑人 2018-12-12 12:23:00</b></div>
            <div class="corner rt"><strong>×</strong></div>
        </div>
        <div class="scard sbottom sunable">
            <div class="cardcontent">
                 <div  style="width:1rem;height:1rem;line-height:1rem;font-size:0.8rem;text-align:center;" >+</div>
            </div>
            <div class="cardtitle"><b>新增</b></div>
            <div class="cardbottom"></div>
        </div>
        <div class="clearfix"></div>
    </div>

</body>
</html>
